<% layout('boilerplate') -%>
<link rel="stylesheet" href="/lib/swiper/css/swiper.min.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/index.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/responsive.css" />

<link rel="stylesheet" href="/lib/iconfont.css" />
<script type="text/javascript" src="/lib/swiper/js/swiper.min.js"></script>
<script type="text/javascript" src="/lib/swiper/js/swiper.animate1.0.3.min.js"></script>
<script type="text/javascript" src="<%= linkPath %>/js/index.js"></script>

    <!-- banner-swiper 首页banner-->
    <div id="home" class="container-fluid">
        <div class="row">
            <div class="banner-swiper banner-swiper-container swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img style="width: 100%" src="<%= linkPath %>/images/banner-1.jpg" alt="<%= altText %>">
                    </div>
                    <div class="swiper-slide">
                        <img class="swiper-lazy" style="width: 100%" data-original="<%= linkPath %>/images/banner-2.jpg" alt="<%= altText %>">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="banner-swiper-pagination swiper-pagination"></div>
            </div>
        </div>
    </div>
    <!-- banner-swiper -->
    <!-- section-data 数据介绍 -->
    <div class="container-fluid">
        <div class="row section-data hidden-xs">
            <div class="col-sm-offset-1">
                <div class="col-xs-3 item wow bounceIn" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <span>3000<i class="r-up">+</i> <i class="r-down">正规医院</i></span>
                </div>
                <div class="col-xs-3 item wow bounceIn" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <span>15000<i class="r-up">+</i> <i class="r-down">执业医生</i></span>
                </div>
                <div class="col-xs-3 item wow bounceIn" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <span>34<i class="r-up">+</i> <i class="r-down">全国城市</i></span>
                </div>
                <div class="col-xs-3 item wow bounceIn" data-wow-duration="1000ms" data-wow-delay="100ms">
                    <span>20,000<i class="r-up">+</i> <i class="r-down">整形案例</i></span>
                </div>
            </div>
        </div>
    </div>
    <!-- section-data -->
    <!-- 二维码 -->
    <div id="erwema" class="hide">
        <div class="mask">
            <img src="<%= linkPath %>/images/erweima.jpg" alt="驻美二维码">
            <img class="hide" src="<%= linkPath %>/images/erweima-gzh.jpg" alt="驻美二维码">
        </div>
    </div>
    <!-- 二维码 -->
    <!-- platform 产品介绍-->
    <div id="introduction" class="platform container-fluid" style="width: 100%" >
        <div class="row">
            <span class="plat-left-item">
                <div class="col-md-7 hidden-sm plat-left plat-left-back" style="background-image: url('<%= linkPath %>/images/plat-banner1.jpg')">
                </div>
                <div class="col-xs-12 hidden-md hidden-lg plat-left">
                    <img class="plat-left-img" style="width: 100%" src="<%= linkPath %>/images/plat-banner1.jpg" alt="<%= altText %>">
                </div>
            </span>
            <span class="plat-left-item" style="display: none">
                <div class="col-md-7 hidden-sm plat-left plat-left-back" style="background-image: url('<%= linkPath %>/images/plat-banner2.jpg')">
                </div>
                <div class="col-xs-12 hidden-md hidden-lg plat-left">
                    <img class="plat-left-img lazyload" style="width: 100%" data-original="<%= linkPath %>/images/plat-banner2.jpg" alt="<%= altText %>">
                </div>
            </span>
            <div class="col-md-5 col-sm-12 plat-right">
                <h1>优雅美学</h1>
                <div class="title">专业化一站式的医美第三方平台</div>
                <p>优雅美学APP（电商平台、咨询服务平台、客户服务中心）拥有全方位的医疗保障体系、精准高效的需求对接、平台极致的用户体验，已为上万爱美人士在线提供了专业的电商、资讯、社交和咨询服务。</p>
                <div class="app-btn wow bounceIn" data-wow-duration="2000ms"
                     data-wow-delay="100ms">点击这里，下载优雅美学APP</div>
                <div class="plat-footer">
                    <span>
                        <div class="hvr-bounce-to-bottom-white hvrBtn active">
                              <i class="iconfont icon-phone"></i>
                        </div>
                        <p>APP</p>
                    </span>
                    <span>
                        <div class="hvr-bounce-to-bottom-white hvrBtn">
                             <i class="iconfont icon-weixin"></i>
                        </div>
                        <p>微信公众号</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- platform -->
    <!-- mid-banner 产品优势-->
    <div class="container-fluid">
        <div class="row">
            <div id="product" class="banner-swiper mid-banner-swiper-container swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image: url('<%= linkPath %>/images/mid-banner1.jpg')">
                        <div class="swiper-item swiper-item-one" style="background-image: url('<%= linkPath %>/images/mid-banner-back1.png')">
                            <h1 class="wow fadeInUp ani"
                                data-wow-duration="1500ms"
                                data-wow-delay="100ms"
                                swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s"
                                swiper-animate-delay="0.1s">优雅美学平台提供四大保障</h1>
                            <div style="margin-top: 50px;">
                                <div class="s_one_icon"><img class="lazy" data-original="<%= linkPath %>/images/mid-b-item01.png" alt="<%= altText %>"></div>
                                <div class="s_one_icon"><img class="lazy" data-original="<%= linkPath %>/images/mid-b-item02.png" alt="<%= altText %>"></div>
                                <div class="s_one_icon"><img class="lazy" data-original="<%= linkPath %>/images/mid-b-item03.png" alt="<%= altText %>"></div>
                                <div class="s_one_icon"><img class="lazy" data-original="<%= linkPath %>/images/mid-b-item04.png" alt="<%= altText %>"></div>
                            </div>
                            <div class="wow fadeInUp ani"
                                 data-wow-duration="1500ms"
                                 data-wow-delay="100ms"
                                 swiper-animate-effect="fadeInUp"
                                 swiper-animate-duration="0.5s"
                                 swiper-animate-delay="0.1s">
                                <p>优雅美学严格的筛选审核评估体系、精准高效的需求对接、平台极致的用户体验、全方位医疗保障体系使得平台进一步解决传统行业的通电，深获大量用户支持</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/mid-banner2.jpg">
                        <div class="swiper-lazy-preloader"></div>
                        <div class="swiper-item swiper-item-two" style="background-image: url('<%= linkPath %>/images/mid-banner-back2.png')">
                            <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">优雅美学平台提供四大保障</h1>
                            <span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                            产品优势-精准营销
                            </span>
                            <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                <p>依托新媒体矩阵与医美平台APP--优雅美学</p>
                                <p>分析覆盖超过的2000万医美潜在消费者的浏览偏好与消费足迹，给消费者提供精准需求</p>
                                <p>内容推送的同时为合作机构提供优质客源</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/mid-banner3.jpg">
                        <div class="swiper-lazy-preloader"></div>
                        <div class="swiper-item swiper-item-three" style="background-image: url('<%= linkPath %>/images/mid-banner-back3.png')">
                            <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">强强联合&nbsp;&nbsp;共赢未来</h1>
                            <span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                            产品优势-战略合作
                            </span>
                            <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                <p>为合作的权威医美机构量身打造定制化的全套网络营销方案</p>
                                <p>通过APP、公众号、PC网站、移动网站、电销等全方位立体式通道，激活覆盖区域的全量医美潜在客户</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/mid-banner4.jpg">
                        <div class="swiper-lazy-preloader"></div>
                        <div class="swiper-item swiper-item-three" style="background-image: url('<%= linkPath %>/images/mid-banner-back4.png')">
                            <h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">赚钱就是这么容易</h1>
                            <span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                            产品优势-分销获利
                            </span>
                            <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                <p>创新美业分销模式，快速扩展目标用户，轻松分享就能体验赚钱的快感;</p>
                                <p>让变美成为习惯，乐于传递和分享</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="mid-banner-swiper-pagination swiper-pagination"></div>
            </div>
        </div>
    </div>
    <!-- mid-banner -->

    <!-- discount 优惠福利-->
    <div id="discount" class="row">
        <h1 class="wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="100ms">优惠福利</h1>
        <div class="col-xs-12 col-md-4">
            <div class="card-item wow flipInX" data-wow-duration="1000ms" data-wow-delay="300ms">
                <p><i>01.</i><span>共赢</span></p>
                <b style="background-image: url('<%= linkPath %>/images/discount1.png')"></b>
                <p class="mainText">联手让利&nbsp;安心变美</p>
                <p class="lowText">与优质品牌医美机构战略合作，平台下单，享专属优惠</p>
            </div>
        </div>
        <div class="col-xs-12 col-md-4">
            <div class="card-item wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                <p><i>02.</i><span>佣金</span></p>
                <b style="background-image: url('<%= linkPath %>/images/discount2.png')"></b>
                <p class="mainText">0风险&nbsp;0投资&nbsp;美丽成就财富</p>
                <p class="lowText">美业分销，成交即享佣金，让美丽也能成为自己一项事业，助力继续变美之路</p>
            </div>
        </div>
        <div class="col-xs-12 col-md-4">
            <div class="card-item wow flipInX" data-wow-duration="1000ms" data-wow-delay="100ms">
                <p><i>03.</i><span>会员</span></p>
                <b style="background-image: url('<%= linkPath %>/images/discount3.png')"></b>
                <p class="mainText">积分抵现金&nbsp;尊贵独享</p>
                <p class="lowText">会员专属福利，积分即可抵现，参与越多，回报越高</p>
            </div>
        </div>
    </div>
    <!-- discount -->
    <!-- partner 合作伙伴-->
    <div id="partner" class="container-fluid">
        <h1 class="wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="300ms">合作伙伴</h1>
        <div class="partner-swiper">
            <div class="partner-swiper-container swiper-container">
                <div class="partner-swiper-wrapper swiper-wrapper">
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_1.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_2.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_3.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_4.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_5.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_6.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_7.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_8.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_9.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_10.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_11.jpg"><div class="swiper-lazy-preloader"></div></div>
                    <div class="swiper-slide swiper-lazy" data-background="<%= linkPath %>/images/partner/par_12.jpg"><div class="swiper-lazy-preloader"></div></div>
                </div>
            </div>
            <div class="swiper-button-prev partner-swiper-button-prev" style="background-image: url('<%= linkPath %>/images/zuo.png')"></div>
            <div class="swiper-button-next partner-swiper-button-next" style="background-image: url('<%= linkPath %>/images/you.png')"></div>
        </div>
    </div>
    <!-- partner -->
    <!--footer-banner-->
    <div id="aboutUs">
        <img class="lazy" src="<%= lazySrc %>"  style="width: 100%" data-original="<%= linkPath %>/images/footer_banner.jpg" alt="优享人生">
    </div>
    <!--footer-banner-->
    <!--footer-about 关于我们-->
    <div id="about">
        <h1 class="wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="100ms">关于我们</h1>
        <div style="z-index: 500;position: relative;" class="wow fadeInUp" data-wow-duration="1500ms" data-wow-delay="300ms">
            <p>上海驻美信息科技有限公司，旗下产品【优雅美学】是为客户提供专业的一站式服务的医美第三方平台</p>
            <p>以 APP、公众号、PC 网站、移动网站的全方位立体式通道，有效链接医院、医生、消费者三方，通过全面的资质审查、安全的医美信息输出、高效的获客渠道等方式，同时满足求美者和医美机构的需求。 </p>
            <p>公司一直致力于以互联网和传统整形营销相结合的运营模式，在为客户供安全变美服务资讯途径的 同时，也为医疗美容机构降低获客成本。</p>
        </div>
        <div style="z-index: 500;position: relative;" class="wow fadeInUp btn-cont" data-wow-duration="2000ms" data-wow-delay="200ms">
            <div class="detail-btn hvrBtn hvr-bounce-to-right"><a href="/company">查看详情</a></div>
        </div>
        <div class="footBg left-bg wow fadeInLeft" data-wow-duration="1500ms" data-wow-delay="150ms">
            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/ipad.jpg" alt="<%= altText %>">
        </div>
        <div class="footBg bt-bg hidden-xs hidden-sm visible-md visible-lg fadeInUp wow" data-wow-duration="1500ms" data-wow-delay="300">
            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/shouji.jpg" alt="<%= altText %>">
        </div>
        <div class="footBg right-bg fadeInRight wow" data-wow-duration="1500ms" data-wow-delay="150ms">
            <img class="lazy" src="<%= lazySrc %>" data-original="<%= linkPath %>/images/bijiben.jpg" alt="<%= altText %>">
        </div>
    </div>
    <!--footer-about-->
<script>
    $(function () {
        var winWidth = $(window).width();

        $('img.lazy').lazyload(
            {
                threshold: 200,//滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
                effect: 'fadeIn',//show fadeIn slideDown
                //placeholder: '',//设置加载中的占位图片路径，如image.load.gif，个人建议不设置，可以通过css设置背景图片加提前设置src=reload.gif的方式，来达到图片正在加载中的效果
            }
            );
        //产品优势 轮播

        var mapText = ['四大保障','精准营销','战略合作','分销获利'];
        var colorClassMap = ['hvr-bounce-to-bottom-pink','hvr-bounce-to-bottom-yellow',
            'hvr-bounce-to-bottom-blue','hvr-bounce-to-bottom-purple']
        var colorCssMap = [ 'linear-gradient(to bottom,#FF5A8C,#FF9BC5)',
            'linear-gradient(to bottom,#F9AE5B,#F6CF73)',
            'linear-gradient(to bottom,#23B1F2,#B6E5F7)',
            'linear-gradient(to bottom,#B66BF2,#D3A1ED)' ]
        var getPlatIconClass = function (index) {
            return winWidth > 979 ? 'hvrBtn ' + colorClassMap[index] : '';
        }

        var midSwiper = new Swiper('.mid-banner-swiper-container', {
            pagination: {
                el: '.mid-banner-swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="mid-swiper-pagination-customs ' + className + '">' +
                        '<div class="imgCont '+ getPlatIconClass(index) +' "><img src="<%= linkPath %>/images/plat-icon'+ (index+1) +'.png" alt="驻美"></div>' +
                        '<p>'+ mapText[index] +'</p>'+
                        '</span>';
                },
            },
            on:{
                init: function(){
                    swiperAnimateCache(this); //隐藏动画元素
                    // swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function(){
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                },
                slideChange: function(){
                    var idx = this.activeIndex;
                    $('.mid-swiper-pagination-customs .imgCont').css('background','inherit');
                    $('.mid-swiper-pagination-customs').eq(idx).find('.imgCont').css('background',colorCssMap[idx]);
                }
            },
            lazy: {
                loadPrevNext: false,
            }
        });

        if(winWidth > 979){
            $(".partner-swiper").on('mouseenter','.swiper-slide',function(){
                var $this = $(this),$index = $this.index();
                var url = '<% linkPath %>/images/partner/par_'+ ($index + 1) +'_act.jpg'
                $this.css("background-image","url(" + url + ")")
            })

            $(".partner-swiper").on('mouseleave','.swiper-slide',function(){
                var $this = $(this),$index = $this.index();
                var url = '<% linkPath %>/images/partner/par_'+ ($index + 1) +'.jpg'
                $this.css("background-image","url(" + url + ")")
            })
        }
    })
</script>
